import React, { useEffect, useState } from 'react';
import { View, TextInput, TouchableOpacity, StyleSheet, Text, Image } from 'react-native';
import { getData } from './services/hotTrack.d';
import { router } from 'expo-router';
const hotTrack = () => {
    const [searchText, setSearchText] = useState('');
    //定义类型
    interface List {
        zhuiimg: string,
        zhuititle: string,
        mingname: ListName,
        _id: string
    }
    interface ListName {
        mingname: string,
        _id: string,
        mingarea: string,
        department: string,
        img: string,
        hospital: string,
    }
    const [list, setList] = useState<List[]>([])
    const handleSearch = () => {
        // 在这里处理搜索逻辑
        console.log('Searching for:', searchText);
        getData1()
    };

    const getData1 = async () => {
        const res: any = await getData({ zhuititle: searchText })
        setList(res.data.zhui)
    }

    const gotoDetail = (zhuititle: string) => {
        router.push({
            pathname: '/zhcFile/detail',
            params: { zhuititle }
        })
    }
    useEffect(() => {
        getData1()
    }, [])
    return (
        <View style={styles.hotTrack}>
            <View style={styles.container}>
                <TouchableOpacity style={styles.button} onPress={handleSearch}>
                    <Text style={styles.buttonText}>🔍</Text>
                </TouchableOpacity>
                <TextInput
                    style={styles.input}
                    placeholder="搜索"
                    value={searchText}
                    onChangeText={setSearchText}
                />
            </View>
            <View>
                {
                    list.map((item, index) => (
                        <TouchableOpacity onPress={() => {
                            gotoDetail(item.zhuititle)
                        }}>
                            <View key={item._id} style={styles.listItem}>
                                <View style={styles.imageContainer}>
                                    <Image
                                        source={{ uri: item.zhuiimg }}
                                        style={styles.image} />
                                </View>
                                <View style={styles.rightContainer}>
                                    <View>
                                        <Text style={{ color: "#000", fontSize: 12, fontWeight: 'bold' }}>{item.zhuititle}</Text>
                                    </View>
                                    <View style={styles.buttonText1}>
                                        <Text style={styles.textColor}>来源：{item.mingname.mingname}</Text>
                                        <Text style={styles.textColor}>2024-04-28</Text>
                                    </View>
                                </View>
                            </View>
                        </TouchableOpacity>
                    ))
                }
            </View>
        </View>

    )
}

export default hotTrack

const styles = StyleSheet.create({
    hotTrack: {
        width: '100%',
        height: '100%',
    },
    container: {
        flexDirection: 'row',
        alignItems: 'center',
        borderWidth: 0.8,
        borderColor: '#ccc',
        borderRadius: 40,
        paddingHorizontal: 20,
        backgroundColor: '#fff',
        marginHorizontal: 20,
        marginTop: 10,
        boxSizing: 'border-box',
    },
    input: {
        flex: 1,
        height: 40,
    },
    button: {
        padding: 10,
    },
    buttonText: {
        fontSize: 20,
    },
    listItem: {
        width: '100%',
        backgroundColor: 'white',
        flexDirection: 'row',
        marginTop: 10,
        padding: 10,
        borderBottomWidth: 1,
        borderBottomColor: '#ccc',

    },
    imageContainer: {
        marginRight: 10,
        width: '35%',
    },
    image: {
        width: 120,
        height: 100,
    },
    rightContainer: {
        width: '65%',
        display: 'flex',
        justifyContent: 'space-between',
        flex: 1,
        // backgroundColor: 'blue',
    },
    buttonText1: {
        width: '95%',
        color: '#ccc',
        display: 'flex',
        justifyContent: 'space-between',
        flexDirection: 'row',
        paddingHorizontal: 10,
    },
    textColor: {
        color: '#999999',
        fontSize: 12
    }
})